<template>
	<view :style="colorStyle">
		<view class="header" :style="'margin-top:'+ mbConfig*2 +'rpx;'">
			<view class="serch-wrapper acea-row row-middle" style="padding-left:10px;">
				<navigator url="/pages/goods_search/second_hand" class="input acea-row row-middle skeleton-rect"
						   :class="[boxStyle?'':'fillet',logoConfig?'':'on',txtStyle?'row-center':'']" hover-class="none"><text
						class="iconfont icon-sousuo"></text>
					搜索</navigator>
			</view>
		</view>

		<view style="display: flex;align-items: center;margin-top: 10rpx;height: 30px;">
			<view class="navi" :style="{ 'color': ProductNavindex == 1 ? '#F95429' : '' }" @click="ProductNavTab(1)">同城</view>
			<view class="navi" :style="{ 'color': ProductNavindex == 2 ? '#F95429' : '' }" @click="ProductNavTab(2)">异地</view>
		</view>

		<view class="list-box animated" :class='goodLists.length > 0?"fadeIn on":""'>
			<view class="item" v-for="(item,index) in goodLists" :key="index" @click="goDetail(item)">
				<view class="pictrue">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="text-info">
					<view class="title line1">{{item.store_name}}</view>
					<view class="price" style="color: #e93323;">
						<view>
							<text>￥</text>{{item.price}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class='noCommodity' v-if="goodLists.length == 0">
			<view style="text-align: center;color: #cfcfcf;">
				<image src='https://fuli-cloud.brdhrm.com/static/images/empty-box.png'></image>
				<view>暂无商品</view>
			</view>
		</view>
	</view>
</template>

<script>
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		getSecondHand
	} from '@/api/second_hand.js';
	import colors from "@/mixins/color";
	export default {
		components: {
		},
		mixins: [colors],
		data() {
			return {
				goodLists: [],
				page: 1,
				limit: 10,
				status: false,
				statusBarHeight: statusBarHeight,
				userInfo:{},
				ProductNavindex: 0
			};
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getSecondHand(this.ProductNavindex);
			this.status = false;
			this.page = 1;
			this.goodLists = [];
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getSecondHand(this.ProductNavindex);
		},
		methods: {
			//获取二手商品列表
			getSecondHand(navIndex) {
				let that = this;
				let limit = that.limit;
				let page = that.page;
				let goodLists = that.goodLists;
				if (that.status) return;
				getSecondHand({
					navIndex: navIndex,
					page: page,
					limit: limit
				}).then(res => {
					this.goodLists = res.data.products;

					let goodListsNew = [];
					let len = res.length;
					goodListsNew = goodLists.concat(res.data.products);
					that.page++;
					that.$set(that, 'goodLists', goodListsNew);
					that.status = limit > len;
					that.page = that.page;
				});
			},
			goDetail(item){
				uni.navigateTo({
					url: `/pages/second_hand/goods_details/index?id=${item.id}`
				});
			},
			//切换本地、外地二手商品
			ProductNavTab(index) {
				this.page = 1;
				this.goodLists = [];
				this.ProductNavindex = index;
				this.getSecondHand(this.ProductNavindex);
			},
		}
	}
</script>

<style lang="scss">
	.noCommodity {
		border-top-width: 0;
	}

	.header {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);

		.serch-wrapper {
			padding: 20rpx 20rpx 0 0;

			.logo {
				height: 60rpx;
				margin-right: 20rpx;
				width: 154rpx;
				text-align: center;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.input {
				flex: 1;
				height: 58rpx;
				padding: 0 0 0 30rpx;
				background: rgba(247, 247, 247, 1);
				border: 1px solid rgba(241, 241, 241, 1);
				color: #BBBBBB;
				font-size: 28rpx;

				.iconfont {
					margin-right: 20rpx;
				}

				// 没有logo，直接搜索框
				&.on {
					width: 100%;
				}

				// 设置圆角
				&.fillet {
					border-radius: 29rpx;
				}

				// 文本框文字居中
				&.row-center {
					padding: 0;
				}
			}
		}
	}
	/* #ifdef MP || APP-PLUS */
	.mp-header {
		z-index: 30;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%);

		.serch-wrapper {
			height: 100%;
			/* #ifdef MP */
			padding: 0 220rpx 0 53rpx;
			/* #endif */
			/* #ifdef APP-PLUS */
			padding: 0 50rpx 0 40rpx;
			/* #endif */
			.logo {
				height: 60rpx;
				margin-right: 30rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.input {
				flex: 1;
				height: 50rpx;
				padding: 0 0 0 30rpx;
				background: rgba(247, 247, 247, 1);
				border: 1px solid rgba(241, 241, 241, 1);
				color: #BBBBBB;
				font-size: 28rpx;

				.iconfont {
					margin-right: 20rpx;
				}

				// 没有logo，直接搜索框
				&.on {
					/* #ifdef MP */
					width: 70%;
					/* #endif */
					/* #ifdef APP-PLUS */
					width: 100%;
					/* #endif */
				}

				// 设置圆角
				&.fillet {
					border-radius: 29rpx;
				}

				// 文本框文字居中
				&.row-center {
					padding: 0;
				}
			}
		}
	}
	/* #endif */

	.navi{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 25%;
		font-size: 32rpx;
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 10px;

		.item {
			width: 345rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			.pictrue_log {
				width: 92rpx;
				height: 44rpx;
				font-size: 26rpx;
				line-height: 44rpx;
			}

			image {
				width: 100%;
				height: 346rpx;
				display: block;
			}

			.text-info {
				padding: 10rpx 20rpx 15rpx;

				.title {
					color: #222222;
				}

				.old-price {
					margin-top: 4rpx;
					font-size: 26rpx;
					color: #AAAAAA;
					text-decoration: line-through;

					text {
						margin-right: 2px;
						font-size: 20rpx;
					}
				}

				.price {
					display: flex;
					align-items: flex-end;
					font-size: 36rpx;
					font-weight: 550;

					text {
						padding-bottom: 4rpx;
						font-size: 26rpx;
						font-weight: normal;
					}

					.txt {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 28rpx;
						height: 28rpx;
						margin-left: 15rpx;
						margin-bottom: 10rpx;
						border-radius: 4rpx;
						font-size: 20rpx;
						font-weight: normal;
						&.on{
							margin-left: 0;
						}
					}
				}
			}
		}

		&.on {
			display: flex;
		}
	}
</style>
